<template>
  <NDrawer
    v-model:show="show"
    :width="600"
    :title="isEdit ? '编辑剧本' : '新增剧本'"
    placement="right"
  >
    <NForm
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-placement="left"
      label-width="100"
      require-mark-placement="right-hanging"
    >
      <NFormItem label="剧本名称" path="scriptName">
        <NInput
          v-model:value="formData.scriptName"
          placeholder="请输入剧本名称"
          :disabled="isEdit"
        />
      </NFormItem>

      <NFormItem label="剧本类型" path="scriptType">
        <NSelect
          v-model:value="formData.scriptType"
          placeholder="请选择剧本类型"
          :options="scriptTypeOptions"
          :disabled="isEdit"
        />
      </NFormItem>

      <NFormItem label="机器人名称" path="botName">
        <NInput
          v-model:value="formData.botName"
          placeholder="请输入机器人名称"
        />
      </NFormItem>

      <NFormItem label="剧本内容" path="scriptContent">
        <NInput
          v-model:value="formData.scriptContent"
          type="textarea"
          placeholder="请输入剧本内容"
          :rows="6"
        />
      </NFormItem>

      <NFormItem label="剧本参数" path="scriptParams">
        <NInput
          v-model:value="formData.scriptParams"
          type="textarea"
          placeholder="请输入剧本参数(JSON格式)"
          :rows="4"
        />
      </NFormItem>

      <NFormItem label="备注" path="remark">
        <NInput
          v-model:value="formData.remark"
          type="textarea"
          placeholder="请输入备注信息"
          :rows="3"
        />
      </NFormItem>
    </NForm>

    <template #footer>
      <div class="flex justify-end gap-2">
        <NButton @click="handleCancel">取消</NButton>
        <NButton type="primary" :loading="submitLoading" @click="handleSubmit">
          确定
        </NButton>
      </div>
    </template>
  </NDrawer>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue';
import { NDrawer, NForm, NFormItem, NInput, NSelect, NButton, type FormInst } from 'naive-ui';
import { useLoading } from '@sa/hooks';

interface ScriptForm {
  id?: number;
  scriptName: string;
  scriptType: string;
  botName: string;
  scriptContent: string;
  scriptParams: string;
  remark: string;
}

interface Props {
  show: boolean;
  isEdit: boolean;
  data?: Partial<ScriptForm>;
}

interface Emits {
  (e: 'update:show', value: boolean): void;
  (e: 'success'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<FormInst>();
const { loading: submitLoading, startLoading: startSubmitLoading, endLoading: endSubmitLoading } = useLoading();

const formData = reactive<ScriptForm>({
  scriptName: '',
  scriptType: 'notification',
  botName: '',
  scriptContent: '',
  scriptParams: '',
  remark: ''
});

const scriptTypeOptions = [
  { label: '通知类', value: 'notification' },
  { label: '对话类', value: 'conversation' }
];

const rules = {
  scriptName: [
    { required: true, message: '请输入剧本名称', trigger: 'blur' }
  ],
  scriptType: [
    { required: true, message: '请选择剧本类型', trigger: 'change' }
  ],
  botName: [
    { required: true, message: '请输入机器人名称', trigger: 'blur' }
  ]
};

const show = computed({
  get: () => props.show,
  set: (value) => emit('update:show', value)
});

const isEdit = computed(() => props.isEdit);

watch(
  () => props.data,
  (newData) => {
    if (newData) {
      Object.assign(formData, newData);
    } else {
      Object.assign(formData, {
        scriptName: '',
        scriptType: 'notification',
        botName: '',
        scriptContent: '',
        scriptParams: '',
        remark: ''
      });
    }
  },
  { immediate: true }
);

const handleSubmit = async () => {
  try {
    await formRef.value?.validate();
    startSubmitLoading();

    // TODO: 调用API保存数据
    // if (isEdit.value) {
    //   await updateScript(formData);
    // } else {
    //   await createScript(formData);
    // }

    emit('success');
    show.value = false;
  } catch (error) {
    console.error('表单验证失败:', error);
  } finally {
    endSubmitLoading();
  }
};

const handleCancel = () => {
  show.value = false;
};
</script>
